<template>
	<div>
		<h2>公司快递费用统计</h2>
		<div class="demo-date-picker">
			<div class="block">
				年月：
			</div>
			<div class="block">
				<el-date-picker v-model="orderStartTime"    type="month" placeholder="开始年月" />
			</div>
			<span class="block">至</span>
			<div class="block">
				<el-date-picker v-model="orderEndTime" type="month" placeholder="结束年月" />
			</div>
			<div style="margin-left: 10px;">
				<el-button @click="fetchData()">查询</el-button>
				<el-button @click="fetchData(6)">上个月</el-button>
				<el-button @click="fetchData(7)">本月</el-button>
				<el-button @click="fetchData(8)">半年</el-button>
				<el-button @click="fetchData(9)">本年</el-button>
			</div>

		</div>
		<div id="chart" style="width: 100%; height: 70vh"></div>
	</div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import { getKdgsTotalByYfZtAPI } from '@/api/Statistics' // 你的 API 请求
const { proxy } = getCurrentInstance()

const chartData = ref(null)

// 处理 API 返回的数据
const processData = (data) => {
	// 获取 X 轴
	const xAxis = data.xAxis

	// 处理 series 数据，确保每个 series 都有 name
	const series = data.series.map((item, index) => ({
		name: item.name || `未知快递 ${index + 1}`, // 没有 name 的填充
		type: item.name === '总额' ? 'line' : 'bar', // 总额用折线图，其他用柱状图
		stack: item.name === '总额' ? null : '总费用', // 堆叠柱状图
		barWidth: '50%', // 柱状图宽度
		label: {
			show: true,
			position: 'inside' // 显示数值
		},
		data: item.data.map((value) => parseFloat(value) || 0) // 确保数值类型
	}))

	return { xAxis, series }
}
let myChart = null
// 渲染 ECharts 图表
const renderChart = () => {
	if (!chartData.value) return
  	const { xAxis, series } = chartData.value
    if (!myChart) {
        myChart = echarts.init(document.getElementById('chart'))
    }
	const option = {
		title: {
			text: '公司快递费用统计'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: { type: 'cross' } // 交叉指示器
		},
		legend: {
			data: series.map((item) => item.name) // 图例
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: xAxis
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				formatter: '{value} 元' // Y 轴单位
			}
		},
		series
	}
	myChart.setOption(option,true)
}
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth();
let orderStartTime = ref(new Date(currentYear, currentMonth))
let orderEndTime = ref(new Date(currentYear, currentMonth))

// 获取数据并处理
const fetchData = async (prame) => {
    // 校验开始时间不能大于结束时间
    if (orderStartTime.value > orderEndTime.value) {
        proxy.$modal.msgError('开始时间不能大于结束时间')
        return
    }
	try {
      let params = {
          orderStartTime: `${orderStartTime.value.getFullYear()}${String(orderStartTime.value.getMonth() + 1).padStart(2, '0')}`,
          orderEndTime:`${orderEndTime.value.getFullYear()}${String(orderEndTime.value.getMonth() + 1).padStart(2, '0')}`,
          queryType: prame
      };
		const { code, data } = await getKdgsTotalByYfZtAPI(params)
		if (code === 200) {
			chartData.value = processData(data) // 处理数据
			renderChart() // 渲染图表
		}
	} catch (error) {
		console.error('数据请求失败', error)
	}
}

onMounted(() => {
	fetchData()
})

</script>
<style scoped>
.demo-date-picker {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0;
	flex-wrap: wrap;
}

.demo-date-picker .block {
	padding: 30px 0;
	text-align: center;
	margin-left: 10px;
	/* border-right: solid 1px var(--el-border-color); */
	/* flex: 1; */
}

.demo-date-picker .block:last-child {
	border-right: none;
}

.demo-date-picker .demonstration {
	display: block;
	color: var(--el-text-color-secondary);
	font-size: 14px;
	margin-bottom: 20px;
}
</style>
